<template>
    <div class="item-bg fluid_setting">
      <div>
        <button class="btn_anniu" @click="change1" :class="{ newStyle: type === 0 }">报警设置</button>
        <button class="btn_anniu" @click="change2" :class="{ newStyle: type === 1 }">实验设置</button>
      </div>
      <div class="seamless-warp" v-show="type === 0">
        <div class="item" v-for="(item, index) in alarmListData" :key="index">
          <div class="item-div">{{item.deviceName }}</div>
          <div class="item-div">高限：</div>
          <input class="content" v-model="item.highAlarm" type="number" placeholder="高限" />
          <div class="item-div">低限：</div>
          <input class="content" v-model="item.bottomAlarm" type="number" placeholder="低限" />
        </div>
        <button class="but" @click="parameterSettings">确定</button>
      </div>
      <div class="seamless-warp" v-show="type === 1">
        <div v-for="(experimentlist, index) in experimentlistData" :key="index">
          <div class="item_view">
            <div class="view-bg"></div>
            <div class="title_font">{{ experimentlist.testName }}</div>
          </div>
          <div class="item-container">
            <div class="item_view" v-for="(data, index) in experimentlist.listData" :key="index">
              <div class="item-div">{{data.deviceName}}</div>
              <div class="item-open">开度：</div>
              <input id="contextNumber" class="content" v-model="data.deviceOpen" type="text" :placeholder="data.deviceOpen"/>
            </div>
          </div>
        </div>
        <button class="but" @click="experimentalSetup">确定</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from "vue";
  import request from "../../api/request";
  import axios from "axios";
  //实验设置
  const experimentlistData = ref([]);
  //报警设置
  const alarmListData = ref([]);
  const type = ref(0);
  onMounted(() => {
    type.value = 0;
    request.systemQuery({ systemId: 2 }).then(res => {
      alarmListData.value = res.data;
    });
    request.testQuery({ systemId: 2, testId: 1 }).then(res => {
      experimentlistData.value = res.data;
    });
  });
  
  const change1 = () => {
    type.value = 0;
  };
  
  const change2 = () => {
    type.value = 1;
  };
  const parameterSettings = () => {
    const listData=JSON.stringify(alarmListData._rawValue)
    axios.post(request.baseURL+'/alarmSystem/data/alarmModify', listData, {  
    headers: {  
      'Content-Type': 'application/json'  
    }  
  })  
  .then(response => {  
    console.log('响应数据:', response.data);  
  })  
  .catch(error => {  
    console.error('请求失败:', error);  
  });
  };
  
  </script>
  <style lang="scss">
  .fluid_setting {
    position: fixed;
    left: 5.6%;
    top: 4%;
    /* 固定定位 */
    width: 100%;
    /* 视口宽度 */
    height: 100%;
    background-repeat: no-repeat;
  
    .btn_anniu {
      position: relative;
      right: 36.7vw;
      width: 10%;
      padding: 10px 0;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      border: 0 solid #fff;
      color: #000;
      outline: none;
      background: #fff;
      /* 添加额外样式以覆盖可能的浏览器默认样式 */
      box-sizing: border-box;
      /* 确保宽度和高度包括边框和内边距 */
      outline: none;
      /* 移除默认的轮廓样式 */
    }
  
    .newStyle {
      border-bottom: 2px solid #f0892e;
      color: #f0892e;
      font-size: 16px;
      font-weight: bold;
    }
  
    /* 列表 */
    .seamless-warp {
      width: 100%;
      height: 90%;
      margin-left: 5%;
      overflow: auto;
    }
  
    .item {
      width: 100%;
      height: 36px;
      font-size: 16px;
      color: #000;
      display: flex;
      margin-top: 10px;
      flex-basis: 25%; /* 每行 4 个，25% 宽度 */
      box-sizing: border-box;
      padding: 10px;
  
      .item-div {
        margin-left: 20px;
      }
    }
  
    .content {
      background-color: white;
      width: 180px;
      height: 25px;
      margin-left: 3px;
      padding-left: 5px;
      border-radius: 5px;
    }
    .view-bg {
      height: 20px;
      width: 3px;
      display: flex;
      text-align: center;
      border-radius: 4px;
      padding-left: 5px;
      padding-top: 3px;
      background-color: #00a6ff;
    }
  
    .item_view {
      width: 100%;
      height: 36px;
      font-size: 16px;
      color: #000;
      display: flex;
      margin-top: 10px;
      flex-basis: 25%; /* 每行 4 个，25% 宽度 */
      box-sizing: border-box;
      padding: 10px;
      .item-div {
        width: 100px;
        margin-left: 20px;
      }
      .item-open{
        width: 50px;
        margin-left:10px;
      }
    }
  
    .title_font {
      width: 100px;
      font-size: 16px;
      margin-left: 10px;
      color: #00a6ff;
    }
    .item-container {
      display: flex;
      flex-wrap: wrap;
      width: 80%;
    }
  }
  </style>